<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				padding: 0;
				margin: 0;
			}
			.a{
				/* display: -webkit-box; */
				/* -webkit-box-orient:vertical; */
				
				display: -moz-box;
                display:-webkit-flex; 
                display: -ms-flexbox;
                 
                -moz-box-orient: vertical;
                -webkit-flex-direction:column;
                -ms-flex-direction:column;
				
				width: 100vw;
				height: 100vh;
				outline: 1px #0000CC solid;
			}
			.header{
				width: 100%;
				height: 10%;
				background: red;
			}
			
			.footer{
				width: 100%;
				height: 10%;
				background: orange;
			}
			
			.body{
				background: yellow;
				overflow: auto;
				-moz-box-flex: 1;
                -webkit-flex:1;
                -ms-flex:1;
				-webkit-overflow-scrolling: touch;
			}
			
			
		</style>
	</head>
	<body>
		<div class="a">
			<div class="header">header</div>
			<div class="body">
				<p>11111111111111111111</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				<p>body</p>
				
			</div>
			<div class="footer">footer</div>
		</div>
		
		
	</body>
</html>
